<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 150px;
        height: 150px;
        background: rgb(191, 182, 182);
        margin: 20px auto;
        background: #000;
        color: #fff;
        padding: 10px;
        border: 10px solid #000;
        cursor: crosshair;
    }

    #box.hover {
        width: 150px;
        height: 150px;
        background: rgb(191, 182, 182);
        margin: 20px auto;
        color: red;
        padding: 10px;
        border: 10px solid red;
        cursor: crosshair;
    }
</style>

<body>
    <div id="box">
        鼠标移入改变样式，鼠标移出恢复。
    </div>
</body>


<script>
    window.onload = function () {
        var yDiv = document.getElementById("box");

        yDiv.onmouseover = function () {
            yDiv.className = "hover"
        };
        yDiv.onmouseout = function () {
            yDiv.className = ""
        };

    }
</script>

</html>